<template>
  <div>
    <el-form label-width="auto"
             :class="{'search-form-box-active':toggle,'single-line': !isMulti}"
             class="search-form-box">
      <slot name="content"></slot>
      <div class="toggle-box"
           v-if="isMulti"
           @click="toggle = !toggle">
        <div class="img-box"
             ref="toggle">
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    isMulti: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      toggle: false
    };
  }
};
</script>

<style scoped lang="scss">
.single-line {
  margin-bottom: 10px;
  height: 80px;
}
</style>
